<script setup lang='ts'>
import myHeaderMete from "@/components/pc/myHeaderMete.vue";
import { onMounted, ref } from "vue";
import footerVue from "../components/pc/footer.vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus'
import { getIdData, user, userDataSepmt, userOrder, userOrderNum, ifUserOrder, ifUserPhone, userjiequnum, isVipUser } from "@/api/api";
const route = useRoute()
const router = useRouter()
const title = ref()
const id = ref()
const data = ref<any>([])
const userName = ref()
const isLogin = ref()
const userF = ref()
const btn = ref()
const mail = ref()
const userNum = ref()
const ifUserOrderData = ref()
const phone = ref()
const userjqNum = ref()
const item = ref()
const isVipUserData = ref()
const open = () => {
    ElMessageBox.confirm(
        '您确定接取此单吗？',
        '通知',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await userOrder({ id: id.value, mail: mail.value })

            if (res.data.code === '304') {
                ElMessage({
                    type: 'error',
                    message: res.data.msg,
                })
                return
            } else if (res.data.code === '404') {
                localStorage.setItem('mail', '')
                localStorage.setItem('token', '')
                ElMessage({
                    type: 'error',
                    message: res.data.msg,
                })
                return
            }
            userNum.value = res.data.data
            UserJQData()
            userOrderData()
            ElMessage({
                type: 'success',
                message: '接单成功，请加标题底下联系方式',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消接单',
            })
        })
}
//页面数据获取
const pageData = async () => {
    const res = await getIdData({ _id: id.value })
    data.value.push(res.data.data)
    if (data.value[0].userid === mail.value) return btn.value = false
    btn.value = true
}
//用户发布数据
const userFData = async () => {
    const userResNnm = await userOrderNum({ id: id.value })
    userNum.value = userResNnm.data.data
}
//用户发布数量
const userFDataNum = async () => {
    const userRes = await userDataSepmt({ mail: mail.value })
    userF.value = userRes.data.data
}
//检查用户是否登录
const userLogin = async () => {
    const resMail = await user({ mail: mail.value })
    if (resMail.data.code !== '200') {
        isLogin.value = false
        return
    }
    isLogin.value = true
    userName.value = resMail.data.data.name
}
//检查是否接取了此单
const userOrderData = async () => {
    const ifUser = await ifUserOrder({ id: id.value, mail: mail.value })
    if (ifUser.data.code === '200') {
        ifUserOrderData.value = false
    } else {
        ifUserOrderData.value = true
    }
}
//用户手机号
const UserPhoneData = async () => {
    const UserPhone = await ifUserPhone({ id: id.value })
    phone.value = UserPhone.data.data
}
//用户接单数量
const UserJQData = async () => {
    const Myuserjiequ = await userjiequnum({ mail: mail.value })
    userjqNum.value = Myuserjiequ.data.data
}
//检测是否是vip
const isVip = async () => {
  const res = await isVipUser({ id: mail.value })
  if (res.data.code === '200') {
    // 使用 "T" 作为分隔符来分割字符串
    const parts = res.data.data.split("T");
    item.value = parts[0]
    isVipUserData.value = true
    return
  }
  isVipUserData.value = false
}
onMounted(async () => {
    mail.value = localStorage.getItem('mail') as string
    id.value = route.query.id
    title.value = route.query.title
    pageData()
    userFData()
    userFDataNum()
    userLogin()
    userOrderData()
    UserPhoneData()
    UserJQData()
    isVip()
})
const goBack = () => {
    router.back()
}
const routerReleases = () => {
    router.push({ name: 'myReleases', query: { id: '1', title: title.value, title2: '任务详情' } })
}
const routerList = () => {
    router.push({ name: 'myList', query: { id: '1', title: title.value, title2: '任务详情' } })
}
</script>

<template>
    <div class="back">
        <el-page-header title="返回" @back="goBack">
            <template #content>
                <span class="text-large font-600 mr-3"> 任务详情 </span>
            </template>
        </el-page-header>
        <img class="logo" src="../../public/vite.svg" alt="">
    </div>
    <div class="color">

        <myHeaderMete :title title2="任务详情" />
        <div class="content">
            <div class="data">
                <div class="title" v-for="i in data" :key="i._id">
                    <div class="header">
                        <div class="titleData">
                            <div class="headerTitle">
                                <div class="money">
                                    金额：￥{{ i.money }}
                                </div>
                                <h3>{{ i.title }}</h3>
                            </div>
                            <div class="titleTextData">
                                <p><span class="colorSpan">发布日期：</span>{{ i.date }}</p>
                                <p class="span"><span class="colorSpan">完成周期：</span>服务商报时</p>
                                <p class="span"><span class="colorSpan">联系方式：</span><span
                                        v-if="ifUserOrderData">投标后显示</span><span
                                        :class="[ifUserOrderData === false ? 'spanColor' : '']"
                                        v-if="!ifUserOrderData">{{
                                            phone
                                        }}</span>
                                </p>
                            </div>
                        </div>
                        <div class="code">
                            <div :class="['start', ifUserOrderData === false ? 'thisColor' : '']">
                                <p class="p1" v-if="ifUserOrderData">等待投手接单中...</p>
                                <p :class="['p1', ifUserOrderData === false ? 'pColor' : '']" v-if="!ifUserOrderData">
                                    请添加联系发布者</p>
                                <p class="p1">已有<span style="color: red;">{{ userNum }}</span>个投手接取此单</p>
                            </div>
                        </div>
                    </div>
                    <div class="textData">
                        <div class="usertext">
                            {{ i.text }}
                        </div>
                        <div class="buo">
                            <el-alert title="恶意接单进行封号！" :closable="false" type="warning" show-icon />
                        </div>
                    </div>
                </div>
                <div class="sendData">
                    <div class="data1">
                        <div class="dataH3">注意事项</div>
                        <p class="dataP">1、因聊天记录可作为纠纷评判依据，故双方联系时，只与对方在互站上所留的QQ、手机号沟通，以防对方拒不承认自己说过的话。</p>
                        <p class="dataP">2、虽然交易产生纠纷的几率很小，但请尽量保留如聊天记录这样的重要信息，以防产生纠纷时便于互站介入快速处理。</p>
                    </div>
                    <div class="data1">
                        <div class="dataH3">网站声明</div>
                        <p class="dataP">1、互站作为第三方中介平台，依据交易合同（商品描述、交易前商定的内容）来保障交易的安全及买卖双方的权益；</p>
                        <p class="dataP">2、非平台线上交易的项目，出现任何后果均与互站无关；无论卖家以何理由要求线下交易的，请联系管理举报。</p>
                    </div>
                </div>
            </div>
            <div class="user">
                <div class="userData" v-if="isLogin">
                    <div class="userimg">
                        <img class="userImg" src="https://iu.huzhan.com/sign/1475925035869.jpg" alt="">
                    </div>
                    <p class="name" v-if="!isVipUserData">{{ userName }}(普通账户)</p>
                    <p :class="['spanColor','name']" v-if="isVipUserData">{{ userName }}(会员账户)</p>
                    <p v-if="isVipUserData" class="vipP">到期时间：{{ item }}</p>
                    <div class="userlook">
                        <div class="look" @click="routerReleases">
                            <p class="text">我的发布</p>
                            <h1>{{ userF }}</h1>
                        </div>
                        <div class="usersum" @click="routerList">
                            <p class="text">我的接单</p>
                            <h1>{{ userjqNum }}</h1>
                        </div>
                    </div>
                    <div class="btn" v-for="i in data" :key="i._id">
                        <el-button plain @click="open" v-if="btn">接取此单</el-button>
                    </div>
                </div>
                <div class="gg">广告位置</div>
            </div>
        </div>
        <div class="s"></div>
    </div>
    <footerVue></footerVue>
</template>

<style scoped>
@import url(../assets/style/viewsCss/thisData.css);

.thisColor {
    border: 3px dashed red !important;
}

.pColor {
    color: red;
}

.spanColor {
    color: red;
}
.vipP{
    color: #999;
}
</style>